<template>
    <div class="datalist">
        <Row>
            <Col :xs="24">
                <Button
                    type="primary"
                    @click="add"
                    class="addbutton"
                    style="width: 51px; height: 35px"
                >
                    <i
                        class="iconfont icon-add"
                        style="font-size: 14px; margin-right: 5px"
                    ></i>
                </Button>
                <Select
                    class="w-select"
                    clearable
                    v-model="searchStatus"
                    placeholder="状态"
                >
                    <Option value="1">启用</Option>
                    <Option value="0">未启用</Option>
                </Select>
                <Input
                    class="w-input"
                    v-model="searchKey"
                    clearable
                    placeholder="联系人名称"
                />
                <Button
                    type="primary"
                    @click="loadPage(1)"
                    style="width: 51px; height: 35px"
                >
                    <Icon type="ios-search" size="14" />
                </Button>
                <Button @click="cancel" class="btn">
                    <i
                        class="iconfont icon-gengxin"
                        style="font-size: 14px; margin-right: 5px"
                    ></i>
                </Button>
            </Col>
        </Row>
        <Table
            class="m-table"
            border
            stripe
            :columns="columns"
            :data="datalist"
        ></Table>
        <div class="page">
            <Page
                :total="count"
                :current="pageNo"
                :page-size="pageSize"
                show-total
                show-elevator
                @on-change="loadPage"
            />
        </div>
        <Modal
            v-model="fundcode"
            :title="title"
            :footer="null"
            :closable="false"
            :mask-closable="false"
            :width="450"
            styles="padding: none;margin: none"
        >
            <Form
                ref="formInline"
                :model="info"
                :rules="infoRules"
                inline
                :label-width="100"
            >
                <FormItem prop="name" label="联系人名称：">
                    <Input
                        class="w-input"
                        v-model="info.name"
                        :maxlength="20"
                        placeholder="请输入联系人名称"
                    />
                </FormItem>
                <FormItem prop="phone" label="联系电话：">
                    <input
                        :maxlength="11"
                        v-model="info.phone"
                        type="text"
                        @input="srInput"
                        class="inputnumber"
                        placeholder="请输入联系电话"
                    />
                    <!-- <Input
                        class="w-input"
                        v-model="info.phone"
                        :maxlength="20"
                        placeholder="请输入联系电话"
                    /> -->
                </FormItem>
                <FormItem prop="status" label="是否启用：" style="width: 150px">
                    <iSwitch v-model="info.status" size="large">
                        <span slot="open">启用</span>
                        <span slot="close">禁用</span>
                    </iSwitch>
                </FormItem>
            </Form>
            <div slot="footer" class="btn-group" style="text-align: center">
                <Button
                    type="primary"
                    @click="submit('formInline')"
                    style="width: 75px; height: 35px"
                >
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button
                    @click="fundcode = false"
                    style="width: 75px; height: 35px"
                >
                    <i
                        class="iconfont icon-butongyi"
                        style="font-size: 14px; margin-right: 5px"
                    ></i
                    >取消
                </Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import api from '@/api/commonApi';
export default {
    data() {
        return {
            searchKey: '',
            searchStatus: '',
            columns: [
                {
                    title: '排序',
                    key: 'iNum',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        let iNum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h('span', iNum);
                    }
                },
                {
                    title: '联系人名称',
                    key: 'name',
                    align: 'center'
                    // width: 300
                },
                {
                    title: '联系电话',
                    key: 'phone',
                    align: 'center'
                    // width: 300
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    width: 300,
                    render: (h, params) => {
                        let status = params.row.status;
                        let statusText = status === '1' ? '启用' : '停用';
                        return h('span', {
                            domProps: {
                                innerHTML: statusText
                            }
                        });
                    }
                },
                {
                    title: '设置',
                    key: 'operate',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        let id = params.row.id;
                        return [
                            h(
                                'span',
                                {
                                    attrs: {
                                        href: 'javascript:void(0);'
                                    },
                                    style: {
                                        color: '#5362e1',
                                        margin: '0px 6px'
                                    },
                                    on: {
                                        click: () => {
                                            (this.fundcode = true),
                                                (this.title = '编辑联系人');
                                            this.id = id;
                                            this.$refs.formInline.fields[0].validateMessage =
                                                '';
                                            this.$refs.formInline.fields[0].validateState =
                                                '';
                                            this.$refs.formInline.fields[1].validateState =
                                                '';
                                            this.$refs.formInline.fields[1].validateMessage =
                                                '';
                                            this.$axios
                                                .post(api.findOneById, {
                                                    id: id
                                                })
                                                .then((resp) => {
                                                    if (resp.data.object) {
                                                        this.info =
                                                            resp.data.object;
                                                        this.info.status =
                                                            Boolean(
                                                                Number(
                                                                    resp.data
                                                                        .object
                                                                        .status
                                                                )
                                                            );
                                                    } else {
                                                        this.$Message.info(
                                                            '数据错误'
                                                        );
                                                    }
                                                })
                                                .catch((err) => {
                                                    // this.$Message.info("服务器超时，请重新访问")
                                                });
                                        }
                                    }
                                },
                                '编辑'
                            )
                        ];
                    }
                }
            ],
            datalist: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            id: null,
            fundcode: false,
            title: '',
            info: {
                name: '',
                phone: '',
                status: true
            },
            infoRules: {
                name: [
                    {
                        required: true,
                        message: '联系人名称不能为空',
                        trigger: 'change'
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: '联系电话不能为空',
                        trigger: 'change' //blur
                    }
                ],
                status: [
                    {
                        required: true,
                        message: '请选择启用状态',
                        trigger: 'change',
                        type: 'boolean'
                    }
                ]
            }
        };
    },
    created() {
        this.searchKey = this.$route.query.searchKey
            ? this.$route.query.searchKey
            : '';
        let breadList = [
            { path: '/index', title: '首页' },
            {
                path: '/index/maintain/configurationWarehouse/index',
                title: '配置仓'
            },
            {
                path: '/index/maintain/name/list',
                title: '疾病字典'
            }
        ];
        this.$emit('changeBreadList', breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        //上来就加载第一页数据
        this.loadPage(pageNo);
    },
    methods: {
        srInput() {
            this.info.phone = this.info.phone.replace(/[^0-9]/g, '');
        },
        cancel() {
            this.searchKey = '';
            this.searchStatus = '';
            this.loadPage(1);
        },
        //加载列表数据
        loadPage(pageNo) {
            this.pageNo = parseInt(pageNo);
            var params = {};
            params.searchKey = this.searchKey.trim();
            params.searchStatus = this.searchStatus;
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.findContactPage, params)
                .then((resp) => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        if (resp.data.object.records) {
                            this.datalist = resp.data.object.records;
                        } else {
                            this.datalist = [];
                            this.count = 0;
                        }
                    } else {
                        this.$Message.info('不允许访问');
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        add() {
            this.fundcode = true;
            this.title = '添加联系人';
            this.info.name = '';
            this.info.phone = '';
            this.info.status = true;
            this.id = '';
        },
        //提交
        submit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.info.status = Number(this.info.status);
                    let operateApi = '';
                    let noticeMsg = '';
                    if (this.id) {
                        operateApi = api.updateContact;
                        noticeMsg = '修改';
                    } else {
                        noticeMsg = '添加';
                        operateApi = api.saveContact;
                    }
                    this.$axios
                        .post(operateApi, this.info)
                        .then((resp) => {
                            if (resp.data.code == 1) {
                                //   公用方法
                                this.$Message.success(noticeMsg + '成功');
                                setTimeout(() => {
                                    this.fundcode = false;
                                    this.loadPage(this.pageNo);
                                }, 500);
                            } else {
                                this.$Message.error(resp.data.message);
                                this.info.status = Boolean(this.info.status);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    this.$Message.error('请完整填写必填项');
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.datalist {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .addbutton {
        background-color: #21c780;
        border: 1px solid #21c780;
    }
    .page {
        text-align: center;
        margin: 20px 0;
    }
}
.w-select {
    width: 100px;
}
.w-input {
    width: 300px;
}
.inputnumber {
    width: 150px;
    background: #fff;
    border: none;
    outline: none;
    text-indent: 10px;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
}
.inputnumber:focus {
    border-color: #5362e1;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal {
        float: right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>